<template>
  <view class="container">
    <view class="wechatapp">
      <!-- <view class="header">
        <image class="image" :src="imgurl+userBackdropImg" mode="widthFix"></image>
      </view> -->
      <view class="user-info">
        <view class="user-arr" @click="goinfo">
          <image
            :src="userHead ? imgurl + userHead : '/static/images/arr_img.png'"
          ></image>
        </view>
        <view class="info-k">
          <view class="info-name" v-if="!islogin">
            <text>{{ islogin ? userOffice : '未登录' }}</text>
            <view class="info-name-no">未加入企业</view>
          </view>
          <view class="info-name-index" v-if="islogin">
            <text>{{ userMobile ? userMobile : '----' }}</text>
          </view>
          <view class="info-phone" v-if="islogin">
            <!-- <text class="info-username">{{
              userMobile ? userMobile : '----'
            }}</text> -->
            <view class="info-usermobile">{{
              userBelong ? userBelong : '未加入企业'
            }}</view>
          </view>
          <!-- <view class="info-phone" v-if="islogin && !userMobile">
            <text class="info-username">{{
              userName ? userName : '----'
            }}</text>
            <text class="info-usermobile"
              >（{{ userCode ? userCode : '----' }}）</text
            >
          </view> -->
        </view>
        <view class="infon_login" v-if="islogin" @click="gologinout">
          退出登录
        </view>
        <view class="infon_login" v-if="!islogin" @click="gologin">
          登录活动
        </view>
      </view>
    </view>

    <view
      class="content"
      :style="{
        background:
          userBelong && islogin && activitylist.length > 0
            ? `url(${homeImage}) no-repeat`
            : 'none',
        backgroundSize: '100% auto',
      }"
      :class="
        userBelong && islogin && activitylist.length > 0 ? 'content-bc' : ''
      "
    >
      <view v-if="userBelong">
        <view
          class="content-item"
          v-for="(item, index) in activitylist"
          :key="index"
        >
          <view class="content-infotop">
            <view class="content-iconortitle">
              <image :src="imgurl + item.coverImg"></image>
              <!-- <text>{{item.name}}</text> -->
            </view>
            <view class="content-item-bt">
              <view class="content-item-bt-name">
                {{ item.name }}
              </view>
              <view class="content-item-bt-time">
                活动截止日期：{{ item.endDate }}
              </view>

              <view class="text-bt">
                <view class="gopay" @click="goenpay(item)"> 参加活动 </view>
                <view
                  class="goshop"
                  v-if="item.shopFlag == 1"
                  @click="goshop(item.id, item.type)"
                >
                  进入商城
                </view>
              </view>
            </view>
          </view>
          <!-- <view class="content-info">
				<view class="content-info-iconortitle">
					<image src="/static/images/icon_time.png" ></image>
					<text>活动时间</text>
				</view>
				<view class="content-info-time">
					{{item.beginTime}}
				</view>
			</view> -->
        </view>
      </view>

      <view
        class="ph-icon"
        @click="gophfun"
        v-if="userBelong && islogin && activitylist.length > 0"
      >
        <image src="/static/images/icon-pm.png" />
        <view>答题排行榜</view>
      </view>

      <view
        class="bt-lx"
        v-if="userBelong && islogin && activitylist.length > 0"
      >
        <view @click="cenct">在线客服</view>
        <view @click="payphone">电话客服</view>
      </view>

      <view class="from-content" v-if="!userBelong && islogin">
        <u-form
          labelPosition="left"
          :model="model1"
          :rules="rules"
          ref="uForm"
          label-width="0"
        >
          <u-form-item
            label=" "
            prop="userBelong"
            @click="sexfun"
            :border-bottom="false"
          >
            <u-button
              @click="sexfun"
              :custom-style="{
                color: model1 && model1.userBelong ? '#000000' : '#c0c0c0',
              }"
              >{{ model1 && model1.userBelong ? model1.userBelong : '请选择' }}
            </u-button>

            <!-- <u-input
                v-model="model1.userInfo.sex"
                disabled
                @click.native="sexfun"
                disabledColor="#ffffff"
                placeholder=""
              ></u-input>
              <u-icon slot="right" name="arrow-right" @click="sexfun"></u-icon> -->
          </u-form-item>
          <u-form-item
            label=" "
            prop="userName"
            ref="item1"
            :border-bottom="false"
          >
            <u-input
              v-model="model1.userName"
              placeholder="请输入姓名"
              :adjust-position="false"
            ></u-input>
          </u-form-item>

          <u-form-item
            label=" "
            prop="phone"
            ref="item1"
            :border-bottom="false"
          >
            <u-input
              v-model="model1.phone"
              :adjust-position="false"
              placeholder="请输入电话"
              disabled
            ></u-input>
          </u-form-item>
          <!-- <view >sdsaads</view> -->
        </u-form>

        <u-button class="u-bttj" size="default" @click="tjfun">提交</u-button>
      </view>
    </view>

    <!-- <view class="contenthd-k">
      <view class="content-item item-left" @click="goactivity">
        <view class="content-icom">
          <image src="/static/images/home1.png" class="icon_hd"></image>
        </view>
        <view class="content-title">
          <text>参加活动</text>
          <view class="content-title-in"> </view>
        </view>
      </view>
      <view class="content-item item-rigit" @click="gohistory">
        <view class="content-title">
          <text>历史记录</text>
          <view class="content-title-in"> 查看参与过的活动 </view>
        </view>
        <view class="content-icom">
          <image src="/static/images/home2.png" class="icon_jl"></image>
        </view>
      </view>
    </view> -->

    <!-- <view class="contenthd-k">
      <view class="content-item item-left item-bt-left" @click="goinfo">
        <view class="content-icom">
          <image src="/static/images/home4.png" class="icon_hd"></image>
        </view>
        <view class="content-title">
          <text>编辑资料</text>
          <view class="content-title-in"> 进入编辑个人信息 </view>
        </view>
      </view>
      <view class="content-item item-bt-rigit">
        <view class="bt_infon">
          <view class="bt_infon_item bt_infon_item-lx" @click="lxfun">
            <view class="bt_infon_item_icom">
              <image src="/static/images/home5.png" class="icon_cart"></image>
            </view>
            <view class="bt_infon_item_name"> 联系我们 </view>
          </view>
          <view class="bt_infon_item bt_infon_item-kf" @click="cenct">
            <view class="bt_infon_item_name"> 在线客服 </view>
            <view class="bt_infon_item_icom">
              <image src="/static/images/home6.png" class="icon_kf"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="contenthd-onek">
      <view class="content-item" @click="goarulesfun">
        <view class="content-icom">
          <image src="/static/images/home3.png" class="icon_hd"></image>
        </view>
        <view class="content-title">
          <text>规则介绍</text>
          <view> 了解文体活动平台功能 </view>
        </view>
      </view>
    </view> -->
    <view class="on-icon" v-if="activitylist.length == 0">
      <image src="/static/images/no.png" mode=""></image>
    </view>

    <u-select
      v-model="showSex"
      mode="single-column"
      :list="actions"
      @confirm="confirm"
      label-name="dictLabel"
      value-name="dictCode"
    ></u-select>
  </view>
</template>

<script>
import { sendUserCode, userLogin } from '@/api/login/login'
import { BASE_URL_IMAHE } from '../../../utils/https'
import { getUserInfo } from '@/api/index/index'
import {
  getActivityPage,
  getJumpShopUrl,
  updateUserInfo,
} from '@/api/index/index'
import { async } from '../../../dist/dev/mp-weixin/common/vendor'
const app = getApp()
export default {
  data() {
    return {
      imgurl: BASE_URL_IMAHE,
      islogin: false,
      userRef: '',
      userMobile: '',
      userCode: '',
      userName: '',
      userHead: '',
      userOffice: '',
      userBackdropImg: '',
      longinType: 0,
      form: {
        userRef: '',
        pageNo: 1,
        pageSize: 10,
        v: '',
        type: 5,
      },
      activitylist: [],
      imgurl: BASE_URL_IMAHE,
      listBackdropImg: '',
      type: '',
      toall: 0,

      // 表单
      showSex: false,
      model1: {
        userName: '',
        userBelong: '',
      },
      actions: [
        {
          value: '1',
          name: 1,
          label: '江',
        },
        {
          value: '2',
          name: 2,
          label: '湖',
        },
      ],
      rules: {
        userName: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change'],
        },
        userBelong: {
          type: 'string',
          required: true,
          message: '请选择',
          trigger: ['blur', 'change'],
        },
      },
      radio: '',
      switchVal: false,
      userBelong: '',
      homeImage: '',
    }
  },

  created() {},
  beforeDestroy() {},
  onLoad() {
    this.homeImage = uni.getStorageSync('homeImage')
      ? uni.getStorageSync('homeImage')
      : '../../static/images/hone_bc.jpg'
    this.longinType = uni.getStorageSync('longinType')
      ? uni.getStorageSync('longinType')
      : 0
    this.type = uni.getStorageSync('type')

    // if(uni.getStorageSync("type")=="chess"){
    this.form.userRef = uni.getStorageSync('userRef')
    // }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onShow() {
    console.log('2options')
    this.userBackdropImg = uni.getStorageSync('userBackdropImg')
      ? uni.getStorageSync('userBackdropImg')
      : ''

    if (uni.getStorageSync('userId')) {
      this.listBackdropImg = uni.getStorageSync('listBackdropImg')
        ? uni.getStorageSync('listBackdropImg')
        : ''
      this.getlist()
      this.model1.userId = uni.getStorageSync('userId')
    }
    // if(uni.getStorageSync("type")=="chess"){
    if (uni.getStorageSync('userRef')) {
      // this.$nextTick(()=>{
      // 	this.userRef=uni.getStorageSync("userRef")
      // 	this.userMobile=uni.getStorageSync("userMobile")
      // 	this.userCode=uni.getStorageSync("userCode")
      // 	this.userName=uni.getStorageSync("userName")
      // 	this.userOffice=uni.getStorageSync("userOffice")
      // 	this.userHead=uni.getStorageSync("userHead")
      // })
      this.getUserInfofun()
      this.form.v = uni.getStorageSync('v')

      this.islogin = true
    } else {
      this.islogin = false
    }

    console.log(
      'sds',
      uni.getStorageSync('userName'),
      uni.getStorageSync('userCode'),
      this.userName
    )
    // }
    // if(uni.getStorageSync("type")=="sport"){
    // 		  if(uni.getStorageSync("usersportRef")){
    // 		  		  this.userRef=uni.getStorageSync("usersportRef")
    // 		  		  this.userMobile=uni.getStorageSync("usersportMobile")
    // 		  		  this.userCode=uni.getStorageSync("usersportCode")

    // 		  		  this.islogin=true
    // 		  }else {

    // 		  		   this.islogin=false
    // 		  }
    // 		  // this.form.userRef=uni.getStorageSync("usersportRef")
    // }
    // if(uni.getStorageSync("type")=="walk"){
    // 		  if(uni.getStorageSync("userwalkRef")){
    // 		  		  this.userRef=uni.getStorageSync("userwalkRef")
    // 		  		  this.userMobile=uni.getStorageSync("userwalkMobile")
    // 		  		  this.userCode=uni.getStorageSync("userwalkCode")

    // 		  		  this.islogin=true
    // 		  }else {

    // 		  		   this.islogin=false
    // 		  }
    // 		  // this.form.userRef=uni.getStorageSync("usersportRef")
    // }

    // if(uni.getStorageSync("type")=="study"){
    // 		  if(uni.getStorageSync("userstudyRef")){
    // 		  		  this.userRef=uni.getStorageSync("userstudyRef")
    // 		  		  this.userMobile=uni.getStorageSync("userstudyMobile")
    // 		  		  this.userCode=uni.getStorageSync("userstudyCode")

    // 		  		  this.islogin=true
    // 		  }else {

    // 		  		   this.islogin=false
    // 		  }
    // 		  // this.form.userRef=uni.getStorageSync("usersportRef")
    // }
  },
  onReachBottom() {
    console.log('到底部 加载更多')
    //请求订单
    if (this.form.pageNo > this.toall) {
      return
    }
    this.getlist()
  },
  methods: {
    gophfun() {
      uni.navigateTo({
        url: '/pages/ranking/index',
      })
    },
    async goshop(id, type) {
      let data = {
        activityId: id,
        userRef: uni.getStorageSync('userRef'),
      }
      const res = await getJumpShopUrl(JSON.stringify(data))
      if (res.result == 0) {
        if (type == '2') {
          uni.setStorageSync('typejumpShopLink', res.jumpShopLink)
          uni.navigateTo({
            url: '/pages/shop/index',
          })
        } else {
          window.location.href = res.jumpShopLink
        }
      } else {
        uni.showToast({
          title: res.message,
          icon: 'none',
        })
      }
    },
    tjfun() {
      var that = this
      console.log(that.model1.userInfo)
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          let res = await updateUserInfo(that.model1)
          if (res.result == 0) {
            uni.showToast({
              title: '提交成功',
              duration: 2000,
            })
            that.userBelong = that.model1.userBelong
          }
        } else {
          console.log('验证失败')
        }
      })
    },
    sexfun() {
      this.actions = uni.getStorageSync('belongList')
      this.showSex = true
    },
    confirm(e) {
      console.log(e)
      this.model1.userBelong = e[0].label
      console.log(e, this.model1.userBelong, e[0].label)
    },
    goenpay(item) {
      if (item.type == '1') {
        uni.navigateTo({
          // url:`/pages/sport/index?activityId=${item.id}`
          url: `/pages/sport/sportlist?activityId=${item.id}`,
        })
        return
      }
      if (item.type == '2') {
        uni.navigateTo({
          url: `/pages/walk/index?activityId=${item.id}`,
        })
        return
      }
      if (item.type == '4') {
        uni.navigateTo({
          url: `/pages/party/index?activityId=${item.id}`,
        })
        return
      }
      if (item.type == '5') {
        uni.navigateTo({
          url: `/pages/party/index?activityId=${item.id}`,
        })
        return
        // uni.navigateTo({
        // 	url: `/pages/party/partystury?activityId=${item.id}`
        // })
        // return
      }
      if (item.type == '6') {
        uni.navigateTo({
          url: `/pages/chees/paychees?activityId=${item.id}`,
        })
        return
      }
      uni.navigateTo({
        url: `/pages/enpay/index?activityId=${item.id}`,
      })
    },
    async getlist() {
      // #ifdef MP-WEIXIN
      this.form.type = 2
      // #endif
      const res = await getActivityPage(JSON.stringify(this.form))
      console.log(res)
      this.toall = Math.ceil(res.page.count / res.page.pageSize)
      this.activitylist.push(...res.page.list)
      this.form.pageNo++
    },
    async getUserInfofun() {
      const res = await getUserInfo(
        JSON.stringify({
          userId: uni.getStorageSync('userId'),
        })
      )
      console.log(res)

      this.userName = res.user && res.user.userName ? res.user.userName : ''
      this.userOffice =
        res.user && res.user.userOffice ? res.user.userOffice : ''
      this.userHead = res.user && res.user.userHead
      this.userCode = res.user && res.user.userCode ? res.user.userCode : ''
      this.userMobile = res.user && res.user.userMobile
      this.userBelong = res.user && res.user.userBelong
      this.model1.phone = res.user && res.user.userMobile
    },
    goarulesfun() {
      uni.navigateTo({
        url: '/pages/rules/index',
      })
    },
    goinfo() {
      // #ifdef MP-WEIXIN
      if (!uni.getStorageSync('v')) {
        uni.showToast({
          title: '获取配置失败，\r\n请扫码进入',
          icon: 'none',
        })
        return
      }
      // #endif
      // if(uni.getStorageSync("type")=="chess"){
      if (uni.getStorageSync('userRef')) {
        uni.navigateTo({
          url: '/pages/myupdate/index',
        })
      } else {
        uni.showToast({
          title: '您还未登录，即将进入登录',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/empower/register',
          })
        }, 1500)
      }
    },
    lxfun() {
      console.log(
        uni.getStorageSync('servicePhone'),
        uni.getStorageSync('serviceUrl')
      )
      uni.makePhoneCall({
        phoneNumber: uni.getStorageSync('servicePhone'), // 电话号码
        success: function () {
          console.log('拨号成功')
        },
        fail: function () {
          console.log('拨号失败')
        },
      })
    },
    payphone() {
      uni.makePhoneCall({
        phoneNumber: uni.getStorageSync('servicePhone'), //仅为示例
      })
    },
    cenct() {
      // #ifdef MP-WEIXIN
      // Customer
      uni.redirectTo({
        url: '/pages/cantent/index',
      })
      return
      // #endif

      window.location.href = uni.getStorageSync('serviceUrl')
    },
    gologin() {
      // #ifdef MP-WEIXIN
      if (!uni.getStorageSync('v')) {
        uni.showToast({
          title: '获取配置失败，\r\n请扫码进入',
          icon: 'none',
        })
        return
      }
      // #endif
      uni.navigateTo({
        url: '/pages/empower/register',
      })
    },
    gologinout() {
      // if(uni.getStorageSync("type")=="chess"){
      uni.removeStorageSync('userRef')
      uni.removeStorageSync('userMobile')
      uni.removeStorageSync('userCode')
      uni.removeStorageSync('userId')
      this.userHead = ''
      this.activitylist = []
      // }
      // if(uni.getStorageSync("type")=="sport"){
      // 		uni.removeStorageSync("usersportRef")
      // 		uni.removeStorageSync("usersportMobile")
      // 		uni.removeStorageSync("usersportCode")
      // }
      // if(uni.getStorageSync("type")=="walk"){
      // 		uni.removeStorageSync("userwalkRef")
      // 		uni.removeStorageSync("userwalkMobile")
      // 		uni.removeStorageSync("userwalkCode")
      // }
      // if(uni.getStorageSync("type")=="study"){
      // 		uni.removeStorageSync("userstudyRef")
      // 		uni.removeStorageSync("userstudyMobile")
      // 		uni.removeStorageSync("userstudyCode")
      // }

      this.islogin = false
    },
    open() {
      // console.log('open');
    },
    close() {
      this.show = false
      // console.log('close');
    },
    gohistory() {
      // #ifdef MP-WEIXIN
      if (!uni.getStorageSync('v')) {
        uni.showToast({
          title: '获取配置失败，\r\n请扫码进入',
          icon: 'none',
        })
        return
      }
      // #endif
      // if(uni.getStorageSync("type")=="chess"){
      if (uni.getStorageSync('userRef')) {
        uni.navigateTo({
          url: '/pages/history/index',
        })
      } else {
        uni.showToast({
          title: '您还未登录，即将进入登录',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/empower/register',
          })
        }, 1500)
      }
      // }
      // if(uni.getStorageSync("type")=="sport"){
      // 			  if(uni.getStorageSync("usersportRef")){
      // 			  			  uni.navigateTo({
      // 			  			  	url:"/pages/history/index"
      // 			  			  })
      // 			  }else{
      // 			  			  uni.showToast({
      // 			  			  	title:"您还未登录，即将进入登录",
      // 			  				icon:"none"
      // 			  			  })
      // 			  			  setTimeout(()=>{
      // 			  			  						uni.navigateTo({
      // 			  			  							url:"/pages/empower/register"
      // 			  			  						})
      // 			  			  },1500)
      // 			  }
      // }
      // if(uni.getStorageSync("type")=="walk"){
      // 			  if(uni.getStorageSync("userwalkRef")){
      // 			  			  uni.navigateTo({
      // 			  			  	url:"/pages/history/index"
      // 			  			  })
      // 			  }else{
      // 			  			  uni.showToast({
      // 			  			  	title:"您还未登录，即将进入登录",
      // 			  				icon:"none"
      // 			  			  })
      // 			  			  setTimeout(()=>{
      // 			  			  						uni.navigateTo({
      // 			  			  							url:"/pages/empower/register"
      // 			  			  						})
      // 			  			  },1500)
      // 			  }
      // }

      // if(uni.getStorageSync("type")=="study"){
      // 			  if(uni.getStorageSync("userstudyRef")){
      // 			  			  uni.navigateTo({
      // 			  			  	url:"/pages/history/index"
      // 			  			  })
      // 			  }else{
      // 			  			  uni.showToast({
      // 			  			  	title:"您还未登录，即将进入登录",
      // 			  				icon:"none"
      // 			  			  })
      // 			  			  setTimeout(()=>{
      // 			  			  						uni.navigateTo({
      // 			  			  							url:"/pages/empower/register"
      // 			  			  						})
      // 			  			  },1500)
      // 			  }
      // }
    },
    goactivity() {
      // #ifdef MP-WEIXIN
      if (!uni.getStorageSync('v')) {
        uni.showToast({
          title: '获取配置失败，\r\n请扫码进入',
          icon: 'none',
        })
        return
      }
      // #endif
      // if(uni.getStorageSync("type")=="chess"){
      if (uni.getStorageSync('userRef')) {
        uni.navigateTo({
          url: '/pages/activity/index',
        })
      } else {
        uni.showToast({
          title: '您还未登录，即将进入登录',
          icon: 'none',
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/empower/register',
          })
        }, 1500)
      }
      // }
      // if(uni.getStorageSync("type")=="sport"){
      // 			  if(uni.getStorageSync("usersportRef")){
      // 			  uni.navigateTo({
      // 			  	url:"/pages/activity/index"
      // 			  })
      // 			  }else{
      // 			  			  uni.showToast({
      // 			  			  	title:"您还未登录，即将进入登录",
      // 			  						icon:"none"
      // 			  			  })
      // 			  					  setTimeout(()=>{
      // 			  						uni.navigateTo({
      // 			  							url:"/pages/empower/register"
      // 			  						})
      // 			  					  },1500)

      // 			  }
      // }
      // // walk
      // if(uni.getStorageSync("type")=="walk"){
      // 			  if(uni.getStorageSync("userwalkRef")){
      // 			  uni.navigateTo({
      // 			  	url:"/pages/activity/index"
      // 			  })
      // 			  }else{
      // 			  			  uni.showToast({
      // 			  			  	title:"您还未登录，即将进入登录",
      // 			  						icon:"none"
      // 			  			  })
      // 			  					  setTimeout(()=>{
      // 			  						uni.navigateTo({
      // 			  							url:"/pages/empower/register"
      // 			  						})
      // 			  					  },1500)

      // 			  }
      // }

      // // walk
      // if(uni.getStorageSync("type")=="study"){
      // 			  if(uni.getStorageSync("userstudyRef")){
      // 			  uni.navigateTo({
      // 			  	url:"/pages/activity/index"
      // 			  })
      // 			  }else{
      // 			  			  uni.showToast({
      // 			  			  	title:"您还未登录，即将进入登录",
      // 			  						icon:"none"
      // 			  			  })
      // 			  					  setTimeout(()=>{
      // 			  						uni.navigateTo({
      // 			  							url:"/pages/empower/register"
      // 			  						})
      // 			  					  },1500)

      // 			  }
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
.btstyle {
  width: 165rpx;
  background: #0065ff;
  color: white;
}

u-checkbox-group::v-deep {
  .u-checkbox__label {
    margin-right: rpx(0);
  }
}

.icon-cone {
  margin-right: 10rpx;
}

.checkBox_wrapper {
  font-size: rpx(12);
  display: flex;
}

.container {
  width: 750rpx;
  padding: 0 0rpx;
  font-size: 32rpx;
  background: #fff;
  min-height: 1200rpx;
  height: 100vh;
  position: relative;
}

.back_img {
  position: absolute;
  top: 80rpx;
  right: 0rpx;
  z-index: 1;

  image {
    width: 350rpx;
  }
}

.login-test {
  margin-top: rpx(20);

  display: flex;
  justify-content: center;

  .login-item {
    width: rpx(80);
    height: rpx(80);
    text-align: center;
    margin-left: rpx(20);
    margin-right: rpx(20);

    .login-text {
      width: 100%;
      font-size: rpx(15);
      line-height: rpx(35);
    }

    .login-icom {
      // width: rpx(48);
      // height: rpx(48);
      // border-radius: 50%;
      // border: rpx(3) solid black;
      // margin: 0 auto;
      .login-icoms {
      }
    }
  }
}

.wechatapp {
  //border-bottom: 1rpx solid #e3e3e3;
  // margin-bottom: 72rpx;
  text-align: center;
  width: 100%;
  height: 170rpx;
  background-color: #e6e6e6;
  overflow: hidden;
  position: relative;

  .header {
    width: 100%;
    height: 100%;

    .image {
      width: 100%;
      height: 100%;
    }
  }
}

.auth-title {
  color: #585858;
  font-size: 60rpx;
  margin-bottom: 40rpx;
  margin-left: 40rpx;
  margin-top: 80rpx;
}

.auth-phonetitle {
  color: #585858;
  font-size: 30rpx;
  margin-bottom: 40rpx;
  margin-left: 40rpx;
  line-height: 60rpx;
  margin-top: 80rpx;
}

.auth-subtitle {
  color: #888;
  margin-bottom: 88rpx;
  font-size: 60rpx;
}

.login-view {
  width: 100%;
  box-sizing: border-box;
  padding: 0 rpx(20);
}

.login-btn-qk {
  font-size: 30rpx;
  text-align: right;
  margin-right: 40rpx;
  margin-top: 40rpx;
}

.content-k {
  display: flex;
  justify-content: space-between;
  padding: 60rpx 48rpx 0rpx;
}

.user-info {
  position: absolute;
  padding: 0rpx 54rpx;
  left: 0rpx;
  bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .user-arr {
    width: 94rpx;
    height: 94rpx;
    border-radius: 50%;

    image {
      width: 94rpx;
      height: 94rpx;
      border-radius: 50%;
    }
  }

  .info-k {
    width: 380rpx;
    // background-color: red;
    text-align: left;
    box-sizing: border-box;
    padding-left: 18rpx;

    .info-name {
      font-weight: 600;
      font-size: 36rpx;
      color: #000000;
      line-height: 46rpx;
    }
    .info-name-no {
      font-size: 28rpx;

      color: #818181;
      line-height: 46rpx;
    }

    .info-name-index {
      font-weight: 600;
      font-size: 36rpx;
      color: #000000;
      line-height: 46rpx;

      text {
        // padding: 5rpx 20rpx;
        // background-color: rgba(0, 0, 0, 0.2);
        border-radius: 35rpx;
      }
    }

    .info-phone {
      font-weight: 400;
      font-size: 29rpx;
      color: #787878;
      line-height: 37rpx;

      .info-username {
        font-size: 26rpx;
      }
    }
  }

  .infon_login {
    display: inline;
    width: auto;
    // height: 60rpx;
    font-size: 28rpx;
    border-radius: 45rpx;
    // line-height: 60rpx;
    padding: 8rpx 15rpx;
    color: white;
    white-space: nowrap;
    background-color: #c80404;
  }
}

.contenthd-k {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0rpx 0rpx;
  margin-top: 60rpx;

  box-sizing: border-box;
  color: white;
  font-size: 28rpx;

  .content-item {
    width: 313rpx;
    height: auto;

    border-radius: 16rpx;
    position: relative;
    box-sizing: border-box;
    padding: 20rpx;
    margin: 0 16rpx;
    border-radius: 25rpx;

    .icon_jl {
      width: 160rpx;
      height: 150rpx;
      margin-top: 30rpx;
      margin-left: 110rpx;
    }

    .icon_hd {
      width: 160rpx;
      height: 150rpx;
    }
  }

  .item-rigit {
    padding-top: 40rpx;
    background: linear-gradient(90deg, #ffd008, #ffd907);

    .content-title {
      margin-top: 10rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #f7f9fa;

      view {
        font-weight: 600;
        font-size: 26rpx;
        color: #f7f9fa;
        margin-top: 19rpx;
      }
    }
  }

  .item-left {
    padding-top: 40rpx;
    background: linear-gradient(90deg, #ffad92, #ffa096, #ff8b91, #ff7f87);

    .content-title {
      margin-top: 35rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #f7f9fa;

      view {
        font-weight: 600;
        font-size: 26rpx;
        color: #f7f9fa;
        margin-top: 19rpx;
      }
    }
  }

  .item-bt-left {
    width: 358rpx;
    padding-top: 25rpx;
    background: linear-gradient(90deg, #8ae7d4, #8ce0e0);

    .icon_hd {
      width: 183rpx;
      height: 176rpx;
      margin-left: 90rpx;
    }

    .content-title {
      margin-top: 25rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #f7f9fa;

      view {
        font-weight: 600;
        font-size: 26rpx;
        color: #f7f9fa;
        margin-top: 19rpx;
      }
    }
  }

  .item-bt-rigit {
    width: 252rpx;
    box-sizing: border-box;
    background-color: white !important;
    padding: 0 !important;
  }

  .content-item:first-child {
    background-color: #0065ff;
  }

  .content-item:last-child {
    background-color: #feaa48;
  }

  .content-title {
    display: flex;
    flex-direction: column;
    margin-top: 8rpx;

    image {
      width: 13rpx;
      height: 22rpx;
    }
  }
}

.bt_infon_item {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;

  // align-items: flex-end;
  .icon_cart {
    width: 100rpx;
    height: 103rpx;
  }

  .icon_kf {
    width: 49rpx;
    height: 49rpx;
    margin-left: 32rpx;
  }

  .bt_infon_item_name {
    // margin-top: 10rpx;
  }

  .bt_infon_item_name:last-child {
    margin-top: 14rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #f7f9fa;
    line-height: 42rpx;
  }
}

.bt_infon_item-lx {
  width: 252rpx;
  height: auto;
  padding-bottom: 20rpx;
  background: linear-gradient(90deg, #bfb4ff, #e9bffa);
  border-radius: 16rpx;
  padding-top: 49rpx;
  text-align: right;
  box-sizing: border-box;
  padding-right: 28rpx;
}

.bt_infon_item-kf {
  width: 252rpx;
  height: auto;
  margin-top: 22rpx;
  padding: 20rpx 0rpx;
  background: linear-gradient(90deg, #f9bab1, #fbc9b8);
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: inherit;
  white-space: nowrap;
}

.contenthd-onek {
  width: 100%;

  .content-item {
    width: 648rpx;
    // height: 299rpx;
    min-height: 299rpx;
    height: auto;
    background: linear-gradient(90deg, #3184ed, #54c8f1);
    border-radius: 16rpx;
    margin: 0 auto;
    margin-top: 30rpx;
    position: relative;

    .content-icom {
      width: 200rpx;
      height: 200rpx;
      position: absolute;
      bottom: 0;
      left: 70rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .content-title {
      text-align: right;
      position: absolute;
      bottom: 69rpx;
      right: 25rpx;

      text {
        font-weight: 600;
        font-size: 36rpx;
        color: #f7f9fa;
        line-height: 46rpx;
      }

      view {
        margin-top: 32rpx;
        font-weight: 600;
        font-size: 26rpx;
        color: #f7f9fa;
        line-height: 33rpx;
      }
    }
  }
}

.content {
  width: 750rpx;
  position: relative;
  height: auto;

  margin: 0rpx auto 0rpx;
  padding-top: 69rpx;
  // top: -50rpx;
  background-color: #ffffff;
  border-radius: 0 0 0 0;

  .content-item {
    width: 642rpx;
    height: auto;
    background: linear-gradient(90deg, #fff3f4, #fff3f4);
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 27rpx 40rpx 27rpx 27rpx;
    margin: 0 auto;
    margin-bottom: 28rpx;

    .content-infotop {
      display: flex;
      justify-content: flex-start;
      position: relative;

      .content-iconortitle {
        display: flex;
        align-items: center;

        image {
          width: 172rpx;
          height: 172rpx;
          border-radius: 28rpx;
        }

        text {
          margin-left: 25rpx;
          font-size: 34rpx;
        }
      }

      .content-item-bt {
        width: 642rpx;
        display: flex;
        flex-direction: column;
        // justify-content:flex-end;
        align-items: flex-start;
        margin-left: 20rpx;
        position: relative;

        .content-item-bt-name {
          width: 380rpx;
          // height: 62rpx;
          font-weight: 600;
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          /* 将对象作为弹性伸缩盒子模型显示 */
          display: -webkit-box;
          /* 限制在一个块元素显示的文本的行数 */
          /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
          -webkit-line-clamp: 2;
          /* 设置或检索伸缩盒对象的子元素的排列方式 */
          -webkit-box-orient: vertical;
        }

        .content-item-bt-time {
          margin-top: 18rpx;
          font-weight: 600;
          font-size: 24rpx;
          color: #c1c1c1;
          white-space: nowrap;
        }

        .text-bt {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: right;
          width: 100%;
          margin-top: 50rpx;
          // position: absolute;
          // bottom: 0;
          // right: 40rpx;
        }
      }

      .gopay {
        // width: 128rpx;
        // height: 48rpx;
        padding: 5rpx 20rpx;
        background: #c80404;
        border-radius: 18rpx;
        font-weight: 600;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 48rpx;
        white-space: normal;
        display: inline;
      }

      .goshop {
        // width: 128rpx;
        // height: 48rpx;
        padding: 5rpx 20rpx;
        white-space: normal;
        display: inline;
        background: #c80404;
        border-radius: 18rpx;
        font-weight: 600;
        font-size: 24rpx;
        color: #ffffff;
        text-align: center;
        line-height: 48rpx;
        margin-left: 16rpx;
      }
    }

    .content-info {
      display: flex;
      justify-content: space-between;
      margin-top: 73rpx;

      .content-info-iconortitle {
        display: flex;
        align-items: center;

        image {
          width: 22rpx;
          height: 22rpx;
        }

        text {
          margin-left: 10rpx;
          font-size: 24rpx;
          color: #8e9aab;
        }
      }

      .content-info-time {
        font-size: 24rpx;
        color: #5e6f88;
      }
    }
  }

  .content-itemsport {
    padding: 0;
    overflow: hidden;
    height: auto;
    border: none;
    border-top-left-radius: 35rpx;
    border-top-right-radius: 35rpx;
    border-bottom-left-radius: 0rpx;
    border-bottom-right-radius: 0rpx;

    .content-itemsport-title {
      width: 100%;
      height: 288rpx;
      overflow: hidden;
      position: relative;

      .content-itemsport-title-img {
        width: 100%;
        height: auto;

        image {
          width: 100%;
          height: auto;
        }
      }
    }

    .content-infosport {
      height: 80rpx;
      font-size: 40rpx;
      text-align: left;
      font-weight: bold;
      line-height: 80rpx;
      padding-left: 20rpx;
      background-color: #f5f5f5;
    }

    .gopay {
      width: 153rpx;
      height: 37rpx;
      font-size: 24rpx;
      border-radius: 45rpx;
      background-color: #0065ff;
      color: #ffffff;
      text-align: center;
      line-height: 37rpx;
      margin-left: 0rpx;
    }

    .goshop {
      width: 108rpx;
      height: 37rpx;
      font-size: 24rpx;
      border-radius: 45rpx;
      background-color: #0065ff;
      color: #ffffff;
      text-align: center;
      line-height: 37rpx;
      margin-top: 36rpx;
      // margin: 36rpx auto 0rpx;
      margin-left: 0rpx;
    }

    .peple {
      width: auto;
      height: 37rpx;
      line-height: 37rpx;
      margin-top: 36rpx;

      text {
        font-size: 24rpx;
        border-radius: 45rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        padding: 2rpx 10rpx;
      }
    }
  }
}
.from-content {
  width: 650rpx;
  border-radius: 35rpx;
  background: #ededed;
  padding: 50rpx 20rpx;
  margin: 0 auto;
  ::v-deep .u-form-item__body {
    background: white;
    height: 90rpx;
  }
  ::v-deep .u-btn {
    width: 100%;
    border: none;
    justify-content: flex-start !important;
    padding-left: 20rpx;
    height: 90rpx;
  }

  ::v-deep .u-hairline-border::after {
    border: none !important;
    text-align: left;
    justify-content: flex-start !important;
  }
  ::v-deep .uni-input-input {
    padding-left: 20rpx;
    height: 90rpx;
  }
  ::v-deep .u-input__input {
    height: 90rpx;
  }
  ::v-deep .uni-input-input {
    padding-left: 20rpx;
    height: 90rpx;
  }
  ::v-deep .uni-input-wrapper {
    height: 90rpx;
  }
  ::v-deep .uni-input-placeholder {
    height: 90rpx;
    padding-left: 20rpx;
    line-height: 90rpx;
    color: #c0c0c0;
  }
  .u-bttj {
    justify-content: center !important;
    border-radius: 55rpx;
    margin-top: 30rpx;
    background: #c80404;
    color: white;
  }
}
.ph-icon {
  margin: 0 auto;
  width: 130rpx;
  height: 100rpx;
  margin-top: 70rpx;
  color: #c80404;
  font-size: 26rpx;
  white-space: nowrap;
  font-weight: bold;
  text-align: center;
  image {
    width: 130rpx;
    height: 100rpx;
  }
}

.on-icon {
  text-align: center;
  padding-top: 212rpx;
}
.bt-lx {
  margin-top: 380rpx;
  bottom: 200rpx;
  width: 100%;
  padding: 0 50rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  text-decoration: underline;
}
.content-bc {
  // background: url('../../static/images/hone_bc.jpg') no-repeat;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  min-height: 100%;
}
</style>
